import React from "react";
import { Modal, Card, Row, Col, Space } from "antd";
import { modalPropsType, orderTypes } from "@/constants/types";
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { isCabinet, isCbm, isMonthSettlement, isPostCode, isTicketSettlement, isinsuranceFlag, takePickUp, takeToWarese } from "@/utils/dictUtil";


const PlaceOrderPreview = ({visible, onCancel, title, currentRow, feeData}: modalPropsType) => {
  const fields = [
    {
      title: '下单账户',
      children: [
        {
          label: '公司名称',
          value: 'customerName'
        },
        {
          label: '结算方式',
          value: '',
          render: (record: orderTypes) => {
            return (
              <Space>
                <XlTableDictColumn value={record?.settlementMethod} type="settlement" />
                {isTicketSettlement(record?.settlementMethod) && <XlTableDictColumn value={record?.payNode} type="payNode" />}
              </Space>
            );
          }
        },
        {
          label: '下单手机',
          value: 'mobile'
        },
        {
          label: '联系人',
          value: 'contacts'
        },
      ]
    },
    {
      title: '收发地址信息',
      children: [
        {
          label: '收件地址',
          render: (record: orderTypes) => (
            <Space>
              <XlTableDictColumn value={record?.destType} type="destType" />
              <XlTableDictColumn value={record?.country} type="country" />
              {isPostCode(record?.destType) ? `${record?.destCode} ${record?.destState} ${record?.destCity} ${record?.destAddress}` : record?.destCode}
            </Space>
          )
        },
        {
          label: '交货方式',
          render: (record: orderTypes) => {
            return (
              <XlTableDictColumn value={record?.pickupWay} type="pickupMethod" />
            );
          }
        },
        {
          label: '取货地址',
          rule: (record: orderTypes) => takePickUp(record?.pickupWay),
          render: (record: orderTypes) => {
            return <span>{[record.pickupProvince, record.pickupCity, record.pickupArea, record.pickupAddress].filter(v => !!v).join('')}</span>;
          }
        },
        {
          label: '预约提货时间',
          rule: (record: orderTypes) => takePickUp(record?.pickupWay),
          render: (record: orderTypes) => {
            return <span>{record?.appointPickupDate} {record?.appointPickupTime}</span>
          }
        },
        {
          label: '取货联系人',
          rule: (record: orderTypes) => takePickUp(record?.pickupWay),
          value: 'pickupContacts'
        },
        {
          label: '联系电话',
          rule: (record: orderTypes) => takePickUp(record?.pickupWay),
          value: 'pickupMobile'
        },
        {
          label: '送仓仓库',
          rule: (record: orderTypes) => takeToWarese(record?.pickupWay),
          render: (record: orderTypes) => {
            return <span>{record?.cwhName}</span>;
          }
        },
        {
          label: '预约送仓时间',
          rule: (record: orderTypes) => takeToWarese(record?.pickupWay),
          render: (record: orderTypes) => {
            return <span>{record?.appointPickupDate} {record?.appointPickupTime}</span>
          }
        },

      ]
    },
    {
      title: '渠道/产品',
      children: [
        {
          label: '渠道/产品',
          render: (record: orderTypes) => {

            return (
              <Space style={{flexWrap: 'wrap'}}>
                <XlTableDictColumn value={record?.product} type="prdType" />
                <span>{record?.cwhName}</span>
                <span>{record?.week}</span>
                <span>{record?.sportName} - {record?.dportName}</span>
                <span>{record?.shipNames ? record?.shipNames?.split(',')?.[0] : ''}</span>
                <span>{record?.batchTime}</span>
              </Space>
            );
          }
        },
        {
          label: '派送方式',
          render: (record: orderTypes) => <XlTableDictColumn value={record?.deliveryMethod} type="deliveryMethod" />
        },
      ]
    },
    {
      title: '货物/产品信息',
      children: [
        {
          label: '名称',
          value: 'cargoName',
        },
        {
          label: '件数/箱',
          value: 'totalPieces'
        },
        {
          label: 'Ship ID',
          span: 24,
          value: 'shipmentId'
        },
        {
          label: '委托体积/CBM',
          value: 'totalVol'
        },
        {
          label: '委托重量/KG',
          value: 'totalWeight'
        },
      ]
    },
    {
      title: '其他信息',
      children: [
        {
          label: '报价方式',
          render: (record: orderTypes) => <XlTableDictColumn value={record?.billMethod} type="paymethod" />
        },
        {
          label: '报关',
          render: (record: orderTypes) => <XlTableDictColumn value={record?.bgMethod} type="customsMethod" />
        },
        {
          label: '税金',
          render: (record: orderTypes) => <XlTableDictColumn value={record?.taxFlag} type="taxes" />
        },
        {
          label: '保险',
          render: (record: orderTypes) => (
            <Space>
              <XlTableDictColumn value={record?.insuranceFlag} type="insure" />
              {isinsuranceFlag(record?.insuranceFlag) && <span>申报货值: {record?.declaredCargoValue}元</span>}
            </Space>
          )
        },
      ]
    },
    {
      title: '报价及费用预估',
      children: [
        {
          label: '单价/元',
          value: 'price'
        },
        // {
        //   label: '附加费单价/元',
        //   value: 'additionalPrice'
        // },
        {
          label: '附加费/元',
          value: 'additionalFee'
        },
        {
          label: '税金/元',
          value: 'taxFee'
        },
        {
          label: '报关费/元',
          value: 'bgFee'
        },
        {
          label: '提货费/元',
          value: 'pickupFee',
          render: (record: orderTypes) => <span>{String(record?.pickupFee) === '-1' ? '实报实销' : String(record?.pickupFee || '')}</span> 
        },
        {
          label: '保险费/元',
          render: () => <span>{feeData?.insuranceFee}</span>
        },
        {
          label: '商检费/元',
          value: 'cargoCheckFee'
        },
        {
          label: '优惠券',
          value: 'couponName'
        },
        {
          label: '货重比',
          render: () => <span>{feeData.weightRatio}</span>
        },
        {
          label: '计费体积/CBM',
          render: () => <span>{feeData.feeVol}</span>
        },
        {
          label: '计费重量/KG',
          render: () => <span>{feeData.feeWeight}</span>
        },
        {
          label: '最低起收',
          render: () => {
            if (isCabinet(currentRow?.billMethod)) {
              return '-';
            }
            return <span>{feeData.minTake}{isCbm(currentRow?.billMethod) ? 'CBM' : 'KGS'}</span>
          }
        },
      ]
    }
  ]

  return (
    <Modal
      maskClosable={false}
      width="1200px"
      open={visible}
      title={title}
      onCancel={onCancel}
      footer={false}
    >
      <div>
        {/* {
          fields.map((v, i) => (
            <Card 
              title={v.title}
              key={v.title}
              style={{marginBottom: 20}}
            >
              <Row gutter={30}>
                {
                  v.children?.map((field: any) => {
                    if (field.rule && !field.rule(currentRow)) {
    
                      return null;;
                    }
                    return (
                      <Col key={field.label} span={field.span || 12}>
                        <Space>
                          <div className="label" style={{minWidth: '90px'}}>{field.label}：</div>
                          <div className="value"><strong>{field.render ? field.render(currentRow) : currentRow?.[field.value] || ''}</strong></div>
                        </Space>
                      </Col>
                    )
                  })
                }
              </Row>
              {i === (fields.length - 1)  &&(
                <div style={{marginTop: 20, fontSize: '22px'}}>
                  <div><strong>预估总费用: {feeData?.totalAmount}</strong></div>
                  <div><strong>（{isCabinet(currentRow?.billMethod) ? '运费总价' : isCbm(currentRow?.billMethod) ? '单价X计费体积' : '单价x计费重量' + '+税金+提货费+保险费+商检费+附加费-优惠券'}）</strong></div>
                  <div><strong>={[
                      isCabinet(currentRow?.billMethod) ? `${feeData?.price || ''}` : isCbm(currentRow?.billMethod) ? `${feeData?.price || ''}x${feeData?.feeVol || ''}` : `${feeData?.price || ''}X${feeData?.feeWeight || ''}`,
                      currentRow?.taxFee || 0,
                      currentRow?.pickupFee || 0,
                      feeData?.insuranceFee || 0,
                      currentRow?.cargoCheckFee || 0,
                      currentRow?.additionalFee || 0,
                    ].join('+')} - {currentRow?.couponAmount || 0}</strong></div>
                  <div><strong>={feeData?.totalAmount}</strong></div>
                </div>
              )}
            </Card>
          ))
        } */}
        {
          fields.map((v, i) => (
            <div style={{marginBottom: 30}}>
              <Row gutter={30}>
                {
                  v.children?.map((field: any) => {
                    if (field.rule && !field.rule(currentRow)) {
    
                      return null;;
                    }
                    return (
                      <Col key={field.label} span={field.span || 12}>
                        <Space>
                          <div className="label" style={{minWidth: '90px'}}>{field.label}：</div>
                          <div className="value"><strong>{field.render ? field.render(currentRow) : currentRow?.[field.value] || ''}</strong></div>
                        </Space>
                      </Col>
                    )
                  })
                }
              </Row>
              {i === (fields.length - 1)  &&(
                <div style={{marginTop: 20, fontSize: '22px'}}>
                  <div><strong>预估总费用: {feeData?.totalAmount}</strong></div>
                  <div><strong>（{(isCabinet(currentRow?.billMethod) ? '运费总价' : isCbm(currentRow?.billMethod) ? '单价x计费体积' : '单价x计费重量') + '+税金+提货费+保险费+商检费+附加费+报关费-优惠券'}）</strong></div>
                  <div><strong>={[
                      isCabinet(currentRow?.billMethod) ? `${currentRow?.price || ''}` : isCbm(currentRow?.billMethod) ? `${currentRow?.price || ''}x${feeData?.feeVol || ''}` : `${currentRow?.price || ''}x${feeData?.feeWeight || ''}`,
                      currentRow?.taxFee || 0,
                      String(currentRow?.pickupFee) === '-1' ? '实报实销' : String(currentRow?.pickupFee || 0),
                      feeData?.insuranceFee || 0,
                      currentRow?.cargoCheckFee || 0,
                      currentRow?.additionalFee || 0,
                      currentRow?.bgFee || 0,
                    ].join('+')} - {currentRow?.couponAmount || 0}</strong></div>
                  <div><strong>={feeData?.totalAmount}</strong></div>
                </div>
              )}
            </div>
          ))
        }
      </div>
    </Modal>
  );
}
export default PlaceOrderPreview;